<template>
	<div class="nowPlaying">
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list
				v-model="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
			>
				<van-cell v-for="item in list">
					<div @click="filmId(item.filmsId)">
						<div class="itemList">
							<div class="img"><img :src="item.poster" class="imgLeft" /></div>
							<div class="itemCenter">
								<h3 class="title">
									{{ item.name }}<span>{{ item.item.name }}</span>
								</h3>
								<div class="grade">
									观众评分<span>{{ item.grade }}</span>
								</div>
								<div class="actors">
									主演：<span v-for="(v, i) in item.actors" :key="i">{{
										v.name
									}}</span>
								</div>
								<div class="runtime">
									上映日期：{{ item.premiereAt | timeFilter }}
								</div>
							</div>
							<div class="btn">
								<van-button plain type="danger">预购</van-button>
							</div>
						</div>
					</div>
				</van-cell>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	data() {
		return {
			loading: false,
			finished: false,
			refreshing: false,
			total: 0,
			page: 1,
			list: [],
		}
	},
	filters: {
		timeFilter(time) {
			const d = new Date(time * 1000)
			const month = ten(d.getMonth() + 1)
			const date = ten(d.getDate())
			const week = day(d.getDay())
			function day(num) {
				const arr = ['日', '一', '二', '三', '四', '五', '六']
				return arr[num]
			}
			function ten(num) {
				return num > 10 ? num : '0' + num
			}
			return '周' + week + ' ' + month + '月' + date + '日'
		},
	},
	methods: {
		filmId(id) {
			this.$router.push('/film' + id)
		},
		onLoad() {
			setTimeout(() => {
				if (this.refreshing) {
					this.list = []
					this.refreshing = false
					this.page = 1
				}
				axios({
					url: `/api/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.page}&pageSize=10&type=2&k=2818338`,
					method: 'get',
					headers: {
						'X-Client-Info':
							'{"a":"3000","ch":"1002","v":"5.2.1","e":"1676514945111647674859521","bc":"110100"}',
						'X-Host': 'mall.film-ticket.film.list',
					},
				}).then((res) => {
					this.list = [...this.list, ...res.data.data.films]
					this.total = res.data.data.total
					this.page++
					if (this.list.length >= this.total) {
						this.finished = true
					}
				})
				this.loading = false
			}, 1000)
		},
		onRefresh() {
			// 加载状态结束
			this.finished = false
			this.loading = true
			this.onLoad()
		},
	},
}
</script>
<style lang="less" scoped>
.nowPlaying {
	margin-top: 10px;
	margin-bottom: 50px;
}
.img {
	width: 20vw;
	height: 152px;
	.imgLeft {
		width: 66px;
		height: 130px;
	}
}
.itemList {
	display: flex;
}
.itemCenter {
	max-width: 150px;
	line-height: 28px;
	margin-left: 5px;
}
.title {
	font-size: 12px;
	color: #000;
	display: flex;
	span {
		display: block;
		width: 16px;
		height: 14px;
		margin-left: 10px;
		background: #d2d6dc;
		font-size: 9px;
		color: #fff;
		border-radius: 2px;
		padding: 0px 2px;
		text-align: center;
		line-height: 14px;
		margin-top: 5px;
	}
}
.grade {
	color: #797d82;
	font-size: 16px;
	span {
		color: #ffb232;
		margin-left: 5px;
	}
}
.actors {
	color: #797d82;
	font-size: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	span {
		margin-left: 3px;
	}
}
.runtime {
	color: #797d82;
	font-size: 16px;
}
.btn {
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 10px;
	button {
		width: 50px;
		font-size: 12px;
		padding: 0px;
		height: 30px;
	}
}
</style>
